<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <div style="width: 40%;float: left">
      <vxe-toolbar>
        <template v-slot:buttons>
          <span style="font-size: 1.3rem">字典分类管理</span>
          <span style="float: right"><vxe-button @click="addType()">添加分类</vxe-button></span>
        </template>
      </vxe-toolbar>
      <vxe-table
        resizable
        border
        ref="xTree"
        row-id="row.id"
        show-overflow="tooltip"
        align="center"
        header-align="center"
        :data.sync="tableTypeData"
        >
        <vxe-table-column field="label" title="标签名"></vxe-table-column>
        <vxe-table-column field="value" title="数据值"></vxe-table-column>
        <vxe-table-column min-width="30%" title="操作">
          <template v-slot="{ row }">
            <div>
              <Button size="small" class="actionBtn" type="success"  @click="showDictList(row)">查看明细</Button>
              <Button size="small" class="actionBtn" type="primary"  @click="add(row)">添加明细</Button>
            </div>
            <div>
              <Button size="small" class="actionBtn" type="info"  @click="updateType(row)">修改</Button>
              <Button size="small" class="actionBtn" type="error"  @click="removeType(row)">删除</Button>
            </div>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <div style="width: 57%;float: right" >
      <vxe-toolbar>
          <template v-slot:buttons>
            <span style="font-size: 1.3rem">字典明细管理</span>
            <span style="float: right">
              <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
              <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
            </span>
        </template>
      </vxe-toolbar>
      <vxe-table
        resizable
        border
        ref="xTree"
        row-id="row.id"
        show-overflow="tooltip"
        highlight-hover-row
        align="center"
        header-align="center"
        :data.sync="tableData"
        :tree-config="{children: 'children', expandAll: true, line: true}">
        <vxe-table-column field="label" title="标签名" tree-node width="35%"></vxe-table-column>
        <vxe-table-column field="parent_id" title="父级编号"></vxe-table-column>
        <vxe-table-column field="value" title="数据值"></vxe-table-column>
        <vxe-table-column field="type" title="类型"></vxe-table-column>
        <vxe-table-column min-width="20%" title="操作">
          <template v-slot="{ row }">
            <Button size="small" class="actionBtn" type="primary"  @click="add(row)">添加下级</Button>
            <Button size="small" class="actionBtn" type="info" @click="update(row)">修改</Button>
            <Button size="small" class="actionBtn" type="error" @click="remove(row)">删除</Button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <Modal
      v-model="infoModal.show"
      :title="infoModal.title"
      @on-ok="addOk(row)">
      <template>
        <Form :model="formItem" :label-width="80">
          <FormItem label="上级:" v-if="formItem.parent_id!=null&&formItem.parent_id!='0'">
            <Select v-model="formItem.parent_id" filterable>
              <Option v-for="(item,index) in list" :value="item.id" :key="index + '-only1'">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem label="标签名:">
            <Input v-model="formItem.label" placeholder="标签名"></Input>
          </FormItem>
          <FormItem label="数据值：">
            <Input v-model="formItem.value"   placeholder="数据值"></Input>
          </FormItem>
          <FormItem label="类型: ">
            <Select v-model="formItem.type" filterable>
              <Option v-for="(item,index) in typeList" :value="item.value" :key="index + '-only2'">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem label="描述:">
            <Input v-model="formItem.description" placeholder="描述"></Input>
          </FormItem>
        </Form>
      </template>
    </Modal>
    <Modal
      v-model="dictTypeModal.show"
      :title="dictTypeModal.title"
      @on-ok="addDictTypeOk(row)">
      <template>
        <Form :model="formItem" :label-width="80">
          <FormItem label="标签名:">
            <Input v-model="formItem.label" placeholder="类别标签名"></Input>
          </FormItem>
          <FormItem label="数据值：">
            <Input v-model="formItem.value"   placeholder="类别数据值"></Input>
          </FormItem>
          <FormItem label="备注:">
            <Input v-model="formItem.remarks" placeholder="备注"></Input>
          </FormItem>
        </Form>
      </template>
    </Modal>
    <Modal
      v-model="deleteModal"
      title="删除"
      @on-ok="deleteOk(row)">
      是否确认删除？
    </Modal>
    <Modal
      v-model="deleteTypeModal"
      title="删除"
      @on-ok="deleteTypeOk(row)">
      改分类下的明细也将被删除是否确认删除？
    </Modal>
    <Modal
      v-model="noDeleteTypeModal"
      title="删除失败"
      @on-ok="noDeleteTypeModal=false">
      改分类已被引用无法删除
    </Modal>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { findDictList, DictList, saveDict, updateDict, deleteDict, findDictTypeList, DictTypeList, saveDictType, updateDictType, deleteDictType, deleteDictList } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      tableData: [],
      tableTypeData: [],
      row: {},
      infoModal: {
        title: '',
        show: false,
        info: {}
      },
      dictTypeModal: {
        title: '',
        show: false,
        info: {}
      },
      formItem: {},
      list: [],
      typeList: [],
      deleteModal: false,
      deleteTypeModal: false,
      noDeleteTypeModal: false
    }
  },
  methods: {
    showDictList (row) {
      let data
      if (row.parent_id === undefined || row.parent_id === null || row.parent_id === '') {
        data = {
          type: row.value
        }
      } else {
        data = {
          type: row.type
        }
      }
      this.tableData = []
      findDictList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    addOk (row) {
      if (this.infoModal.title === '新增') {
        let data = {
          label: this.formItem.label,
          value: this.formItem.value,
          type: this.formItem.type,
          description: this.formItem.description,
          parent_id: this.formItem.parent_id
        }
        if (data.parent_id === undefined) {
          data.parent_id = 0
        }
        saveDict(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.showDictList(row)
            this.findList()
            this.findTypeList()
          } else {
            this.$Notice.error({
              title: '新增失败',
              desc: ret.data.errmsg
            })
          }
        })
      } else if (this.infoModal.title === '修改') {
        let data = {
          id: this.formItem.id,
          label: this.formItem.label,
          value: this.formItem.value,
          type: this.formItem.type,
          description: this.formItem.description,
          parent_id: this.formItem.parent_id
        }
        updateDict(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.showDictList(row)
            this.findList()
            this.findTypeList()
          } else {
            this.$Notice.error({
              title: '修改失败',
              desc: ret.data.errmsg
            })
          }
        })
      }
    },
    addDictTypeOk (row) {
      if (this.dictTypeModal.title === '新增字典分类') {
        let data = {
          label: this.formItem.label,
          value: this.formItem.value,
          remarks: this.formItem.remarks
        }
        saveDictType(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.init()
            this.showDictList(row)
            this.findList()
            this.findTypeList()
          } else {
            this.$Notice.error({
              title: '新增失败',
              desc: ret.data.errmsg
            })
          }
        })
      } else if (this.dictTypeModal.title === '修改字典分类') {
        console.log(this.formItem)
        let data = {
          id: this.formItem.id,
          label: this.formItem.label,
          value: this.formItem.value,
          remarks: this.formItem.remarks
        }
        updateDictType(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.init()
            this.showDictList(row)
            this.findList()
            this.findTypeList()
          } else {
            this.$Notice.error({
              title: '修改失败',
              desc: ret.data.errmsg
            })
          }
        })
      }
    },
    addType () {
      this.formItem = {}
      this.dictTypeModal.title = '新增字典分类'
      this.dictTypeModal.show = true
    },
    add (e) {
      this.row = e
      this.formItem = {}
      if (e.parent_id != null) {
        this.formItem.parent_id = e.id
      }
      if (e.type != null) {
        this.formItem.type = e.type
      } else {
        this.formItem.type = e.value
      }
      this.infoModal.title = '新增'
      this.infoModal.show = true
    },
    updateType (e) {
      this.row = e
      this.formItem = {}
      this.formItem = e
      this.dictTypeModal.title = '修改字典分类'
      this.dictTypeModal.show = true
    },
    update (e) {
      this.row = e
      this.formItem = {}
      this.formItem = e
      this.infoModal.title = '修改'
      this.infoModal.show = true
    },
    removeType (e) {
      this.row = e
      this.deleteTypeModal = true
    },
    remove (e) {
      this.row = e
      this.deleteModal = true
    },
    deleteTypeOk (row) {
      let data = {
        id: this.row.id,
        type: this.row.value
      }
      deleteDictType(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.init()
          this.showDictList(row)
          this.findList()
          this.findTypeList()
          deleteDictList(data).then(ret => {
            if (ret.data.errcode === 0) {
              this.init()
              this.showDictList(row)
              this.findList()
              this.findTypeList()
            } else {
              this.$Notice.error({
                title: '明细删除失败',
                desc: ret.data.errmsg
              })
            }
          })
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: '该分类不存在或已被引用无法删除'
          })
        }
      })
    },
    deleteOk (row) {
      console.log(row)
      let data = {
        id: this.row.id
      }
      deleteDict(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.showDictList(row)
          this.findList()
          this.findTypeList()
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    init () {
      findDictList().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
      findDictTypeList().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableTypeData = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    findTypeList () {
      DictTypeList().then(ret => {
        if (ret.data.errcode === 0) {
          this.typeList = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    findList () {
      DictList().then(ret => {
        if (ret.data.errcode === 0) {
          this.list = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.findList()
    this.findTypeList()
  }
}
</script>

<style scoped>
.actionBtn {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
